<template>
  <view class="jump-start-page">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="nav-bar">
        <view class="nav-left" @click="goBack">
        </view>
       <!-- <text class="nav-title">换胎救援</text> -->
        <view class="nav-right"></view>
      </view>
    </view>
    
		<!-- 顶部地图 -->
    <view class="map-card">
      <map 
		id="myMap"
        class="map"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        :show-location="true"
        :enable-3D="true"
        :enable-satellite="false"
        :enable-traffic="false"
        :scale="16"
				@tap="onMapTap"
				@regionchange="onRegionChange"
				@updated="onMapUpdated"
      ></map>
			<!-- 地图加载状态 -->
			<view v-if="mapLoading" class="map-loading">
				<text>正在加载地图...</text>
			</view>
    </view>

    <!-- 选项卡：搭电/换胎/拖车 -->
    <view class="tabs">
			<view :class="['tab', activeTab === 0 ? 'active' : '']" @click="switchTab(0)">搭电</view>
			<view :class="['tab', activeTab === 1 ? 'active' : '']" @click="switchTab(1)">换胎</view>
			<view :class="['tab', activeTab === 2 ? 'active' : '']" @click="switchTab(2)">拖车</view>
    </view>


    <!-- 表单区域 -->
    <view class="form">
      <view class="form-item">
        <text class="label">位置</text>
				<input 
					class="input" 
					placeholder="河南省焦作市山阳区32号" 
					v-model="form.location" 
					@blur="resolveAddress('location', $event)" 
				/>
      </view>

      <view class="form-item">
        <text class="label">求助人</text>
        <input class="input" placeholder="张先生" v-model="form.name" />
      </view>
      <view class="form-item">
        <text class="label">联系方式</text>
        <input class="input" placeholder="15523632541" v-model="form.phone" />
      </view>
      <view class="form-item">
        <text class="label">车牌</text>
        <input class="input" placeholder="豫CJ4321" v-model="form.plate" />
      </view>
      <view class="form-item textarea-item">
        <text class="label">描述</text>
        <textarea class="textarea" :maxlength="200" placeholder="请准确描述当前的状况及所需的帮助" v-model="form.desc" />
      </view>
    </view>

    <!-- 呼叫救援按钮 -->
    <view class="call-wrap">
      <button class="call-btn" @click="callTireChange">呼叫救援</button>
      <view class="record-link" @click="goRecords">救援记录 ></view>
    </view>

    <!-- 警务救助 -->
    <view class="police-card">
			<view class="police-title">
				警务救助
			</view>
      <view class="police-grid">
				<view class="police-item" v-for="item in policeList" :key="item.name">
          <image :src="item.icon" class="police-icon" mode="aspectFit" />
          <text class="police-name">{{ item.name }}</text>
          <text class="police-tel">{{ item.tel }}</text>
        </view>
      </view>
    </view>

		<!-- 紧急恢复按钮（当所有Key都不可用时显示） -->
		<view v-if="keyStatus.failedKeys.length > 0" class="emergency-recovery">
			<button class="recovery-btn" @click="addNewKey">添加新Key恢复服务</button>
		</view>
		

		<!-- 底部占位 -->
    <view class="bottom-tab-placeholder"></view>

  </view>
</template>

<script>
export default {
  data() {
    return {
			activeTab: 1, // 默认选中换胎页面
      form: {
        location: '',
        name: '',
        phone: '',
        plate: '',
        carModel: '',
				desc: '',
				locationData: null // 搭电地点经纬度
			},
			policeList: [{
					name: '交通事故',
					tel: '122',
					icon: '/static/static-lj/交通事故 拷贝.png'
				},
				{
					name: '火警',
					tel: '119',
					icon: '/static/static-lj/火警.png'
				},
				{
					name: '急救中心',
					tel: '120',
					icon: '/static/static-lj/急救包.png'
				},
				{
					name: '公安报警',
					tel: '110',
					icon: '/static/static-lj/警察,公安.png'
				}
			],
			latitude: 34.775, // 默认纬度（焦作示例）
      longitude: 113.665, // 默认经度
			markers: [],
			mapLoading: true, // 地图加载状态
			locationPermission: false, // 定位权限状态
			keyStatus: {
				currentKeyIndex: 0, // 当前使用的Key索引
				failedKeys: [], // 已失败的Key索引列表
				lastSuccessTime: 0 // 最后一次成功的时间戳
			},
			currentResolvingAddress: null // 当前正在解析的地址信息
    }
  },
  onLoad() {
		this.initMap();
	},
	onShow() {
		// 页面显示时重新获取位置
		this.getCurrentLocation();
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 初始化地图
		initMap() {
			this.mapLoading = true;
			this.getCurrentLocation();
		},
		
		// 获取当前位置
		getCurrentLocation() {
			// 检查定位权限
			uni.getSetting({
				success: (res) => {
					if (res.authSetting['scope.userLocation'] === false) {
						// 用户拒绝了定位权限，显示默认位置
						this.showDefaultLocation();
						return;
					}
					
					// 尝试获取位置
					uni.getLocation({
						type: 'gcj02',
						altitude: true,
						success: (res) => {
							console.log('定位成功:', res);
							this.latitude = res.latitude;
							this.longitude = res.longitude;
							this.locationPermission = true;
							this.updateMarkers();
							this.mapLoading = false;
						},
						fail: (err) => {
							console.log('定位失败:', err);
							this.showDefaultLocation();
						}
					});
				},
				fail: () => {
					this.showDefaultLocation();
				}
			});
		},
		
		// 显示默认位置
		showDefaultLocation() {
			this.locationPermission = false;
			this.mapLoading = false;
			this.updateMarkers();
			
			// 提示用户
			uni.showToast({
				title: '定位失败，显示默认位置',
				icon: 'none',
				duration: 2000
			});
		},
		
		// 更新地图标记
		updateMarkers() {
			this.markers = []; // 清空原有标记
			console.log('更新地图标记 - 换胎地点:', this.form.locationData);

			// 显示「搭电地点」标记
			if (this.form.locationData) {
				this.markers.push({
					id: 1,
					latitude: this.form.locationData.lat,
					longitude: this.form.locationData.lng,
					iconPath: '/static/static-lj/椭圆 3 拷贝 2.png',
					width: 35,
					height: 35,
					anchor: { x: 0.5, y: 1 },
					callout: {
						content: '换胎地点',
						color: '#fff',
						fontSize: 14,
						fontWeight: 'bold',
						bgColor: '#ff6a2f',
						padding: 8,
						borderRadius: 15,
						display: 'ALWAYS',
						borderWidth: 2,
						borderColor: '#fff',
						boxShadow: '0 2px 6px rgba(255, 106, 47, 0.3)'
					}
				});
				console.log('添加换胎地点标记:', this.form.locationData);
			}

			// 若没有换胎地点，显示「默认位置」
			if (this.markers.length === 0) {
				this.markers.push({
					id: 2,
					latitude: this.latitude,
					longitude: this.longitude,
					iconPath: '/static/static-lj/椭圆 3 拷贝 2.png',
					width: 32,
					height: 32,
					anchor: { x: 0.5, y: 1 },
					callout: {
						content: this.locationPermission ? '当前位置' : '默认位置（焦作市）',
						color: '#fff',
						fontSize: 13,
						fontWeight: 'bold',
						bgColor: '#666',
						padding: 8,
						borderRadius: 12,
						display: 'ALWAYS',
						borderWidth: 2,
						borderColor: '#fff',
						boxShadow: '0 2px 4px rgba(102, 102, 102, 0.3)'
					}
				});
			}
		},
		
		// 解析地址为经纬度
		resolveAddress(type, e) {
			let address = e.target.value.trim();
			console.log(`开始解析换胎地点地址:`, address);
			
			if (!address) {
				// 清空地址时也清除对应的经纬度
				this.form.locationData = null;
				this.updateMarkers();
				return;
			}
			
			// 记录当前正在解析的地址
			this.currentResolvingAddress = { type, address };

			// 检查本地缓存
			const cacheKey = `address_${address}`;
			const cachedLocation = uni.getStorageSync(cacheKey);
			if (cachedLocation) {
				console.log('使用缓存地址:', cachedLocation);
				this.form.locationData = cachedLocation;
				this.latitude = cachedLocation.lat;
				this.longitude = cachedLocation.lng;
				console.log('使用换胎地点缓存地址:', cachedLocation);
				
				// 强制更新地图中心位置
				this.$nextTick(() => {
					const mapCtx = uni.createMapContext('myMap');
					mapCtx.moveToLocation({
						latitude: cachedLocation.lat,
						longitude: cachedLocation.lng
					});
					console.log('地图中心已更新到换胎地点缓存位置:', cachedLocation.lat, cachedLocation.lng);
				});
				this.updateMarkers();
				return;
			}

			// 使用多Key轮换机制解析地址
			this.resolveAddressWithFallback(type, address, 0);
		},
		
		// 使用备用Key策略解析地址
		resolveAddressWithFallback(type, address, keyIndex) {
			// 显示加载提示
			uni.showLoading({
				title: `解析地址中...${keyIndex > 0 ? `(使用备用Key${keyIndex + 1})` : ''}`
			});

			// 获取用户自定义的Key
			const customKeys = uni.getStorageSync('custom_map_keys') || [];
			
			// 腾讯地图 Key 列表（按优先级排序）
			const mapKeys = [
				// 用户自定义Key优先使用
				...customKeys,
				// 默认Key
				'KZCBZ-AYZK7-CKLXX-P67B4-66FHZ-3ZB52', // 主要Key
				'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', // 备用Key1
				'5BJBZ-QYECX-7J54Z-2N2Q6-5S5U6-J2F3D',  // 备用Key2
				'KZCBZ-AYZK7-CKLXX-P67B4-66FHZ-3ZB52', // 重复使用主要Key
				'OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77', // 重复使用备用Key1
				'5BJBZ-QYECX-7J54Z-2N2Q6-5S5U6-J2F3D',  // 重复使用备用Key2
			];

			// 过滤掉无效的Key（包含占位符的Key）
			const validKeys = mapKeys.filter(key => 
				!key.includes('YOUR_KEY') && 
				key.length > 10 // 确保Key长度合理
			);

			// 如果所有有效Key都用完了，显示错误并提供解决方案
			if (keyIndex >= validKeys.length) {
				uni.hideLoading();
				console.log('所有有效Key都已用完，地址解析失败:', address);
				uni.showModal({
					title: '地图服务暂时不可用',
					content: `所有地图服务Key都已达到调用限制。\n\n解决方案：\n1. 点击"添加新Key"输入有效Key\n2. 使用默认位置继续\n3. 稍后再试`,
					showCancel: true,
					cancelText: '稍后再试',
					confirmText: '添加新Key',
					success: (res) => {
						if (res.confirm) {
							this.addNewKey();
						} else {
							// 使用默认位置
							this.useDefaultLocationForAddress(type, address);
						}
					}
				});
				return;
			}

			const mapKey = validKeys[keyIndex];
			const apiUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(address)}&key=${mapKey}`;
			
			console.log(`尝试使用Key ${keyIndex + 1} 解析地址:`, address);
			console.log('API URL:', apiUrl);

			uni.request({
				url: apiUrl,
				success: (res) => {
					uni.hideLoading();
					console.log(`Key ${keyIndex + 1} API响应:`, res.data);
					
					if (res.data.status === 0) { // API返回成功
						const location = res.data.result.location; // 经纬度信息
						const locationData = { lat: location.lat, lng: location.lng };
						 
						// 缓存地址解析结果，避免重复调用API
						uni.setStorageSync(`address_${address}`, locationData);
						 
						this.form.locationData = locationData;
						this.latitude = location.lat; // 地图中心设为搭电地点纬度
						this.longitude = location.lng; // 地图中心设为搭电地点经度
						console.log('搭电地点地址解析成功:', locationData);
						
						// 强制更新地图中心位置
						this.$nextTick(() => {
							const mapCtx = uni.createMapContext('myMap');
							mapCtx.moveToLocation({
								latitude: location.lat,
								longitude: location.lng
							});
							console.log('地图中心已更新到换胎地点位置:', location.lat, location.lng);
							
							// 延迟更新标记，确保地图位置先更新
							setTimeout(() => {
								this.updateMarkers();
								console.log('换胎地点标记已更新');
							}, 500);
						});
					} else {
						// 处理API错误
						console.log(`Key ${keyIndex + 1} 解析失败:`, res.data);
						const errorMsg = res.data.message || '未知错误';
						 
						// 如果是调用量上限错误，尝试下一个备用Key
						if (errorMsg.includes('调用量已达到上限') || errorMsg.includes('配额不足')) {
							console.log(`Key ${keyIndex + 1} 调用量已达上限，尝试下一个Key`);
							this.resolveAddressWithFallback(type, address, keyIndex + 1);
						} else {
							console.log(`Key ${keyIndex + 1} 出现其他错误: ${errorMsg}，尝试下一个Key`);
							this.resolveAddressWithFallback(type, address, keyIndex + 1);
						}
					}
				},
				fail: (err) => {
					uni.hideLoading();
					console.log(`Key ${keyIndex + 1} 网络请求失败:`, err);
					// 网络错误也尝试下一个Key
					this.resolveAddressWithFallback(type, address, keyIndex + 1);
				}
			});
		},
		
		// 地图点击事件
		onMapTap(e) {
			console.log('地图点击:', e);
		},
		
		// 地图区域变化事件
		onRegionChange(e) {
			console.log('地图区域变化:', e);
		},
		
		// 地图更新完成事件
		onMapUpdated(e) {
			console.log('地图更新完成:', e);
			this.mapLoading = false;
		},
		
		// 重新定位
		relocate() {
			this.mapLoading = true;
			this.getCurrentLocation();
		},
		
		switchTab(index) {
			// 如果点击的是当前已激活的标签，不执行任何操作
			if (this.activeTab === index) {
				return;
			}
			
			// 只有换胎页面(index=1)才在当前页面处理
			if (index === 1) {
				this.activeTab = index;
				uni.showToast({
					title: '已切换到换胎服务',
					icon: 'none',
					duration: 1500
				});
				
				// 确保地图正确显示
				if (this.form.locationData) {
					this.$nextTick(() => {
						const mapCtx = uni.createMapContext('myMap');
						mapCtx.moveToLocation({
							latitude: this.form.locationData.lat,
							longitude: this.form.locationData.lng
						});
					});
				}
			} else {
				// 搭电和拖车页面跳转到其他页面
				const tabNames = ['搭电', '换胎', '拖车'];
				uni.showToast({
					title: `正在跳转到${tabNames[index]}页面`,
					icon: 'loading',
					duration: 1000
				});
				
				// 跳转到对应的页面
				if (index === 0) {
					// 跳转到搭电页面
					uni.reLaunch({
						url: '/pages/help/jump-start'
					});
				} else if (index === 2) {
					// 跳转到拖车页面
					uni.navigateTo({
						url: '/pages/help/emergency-rescue'
					});
				}
			}
		},
		
		callTireChange() {
			// 验证表单
			if (!this.form.location || !this.form.locationData) {
				return uni.showToast({ title: '请输入有效的位置', icon: 'none' });
			}
			
			if (!this.form.name || !this.form.phone) {
				return uni.showToast({ title: '请完善联系人信息', icon: 'none' });
			}
			
			uni.showToast({
				title: '已发起换胎救援',
				icon: 'success'
			})
		},
		
		goRecords() {
			console.log('跳转到救援记录页面');
			uni.navigateTo({
				url: '/help-item/emergency/record',
				success: () => {
					console.log('跳转成功');
				},
				fail: (err) => {
					console.log('跳转失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		},
		
		// 添加新Key
		addNewKey() {
			uni.showModal({
				title: '添加新的地图Key',
				content: '请输入新的腾讯地图Key以恢复服务\n\n获取Key步骤：\n1. 访问 https://lbs.qq.com/\n2. 注册/登录账号\n3. 创建应用获取Key',
				editable: true,
				placeholderText: '请输入新的Key（格式：KZCBZ-XXXXX-XXXXX-XXXXX-XXXXX-XXXXX）',
				success: (res) => {
					if (res.confirm && res.content) {
						const key = res.content.trim();
						if (key.length > 20 && key.includes('-')) {
							// 测试新Key
							this.testAndAddNewKey(key);
						} else {
							uni.showToast({
								title: 'Key格式不正确，请检查',
								icon: 'none',
								duration: 3000
							});
						}
					}
				}
			});
		},
		
		// 测试并添加新Key
		testAndAddNewKey(newKey) {
			uni.showLoading({
				title: '测试新Key中...'
			});
			
			const testAddress = '北京市天安门';
			const apiUrl = `https://apis.map.qq.com/ws/geocoder/v1/?address=${encodeURIComponent(testAddress)}&key=${newKey}`;
			
			uni.request({
				url: apiUrl,
				success: (res) => {
					uni.hideLoading();
					if (res.data.status === 0) {
						// Key有效，保存到本地存储
						const savedKeys = uni.getStorageSync('custom_map_keys') || [];
						if (!savedKeys.includes(newKey)) {
							savedKeys.push(newKey);
							uni.setStorageSync('custom_map_keys', savedKeys);
						}
						
						// 重置Key状态
						this.keyStatus = {
							currentKeyIndex: 0,
							failedKeys: [],
							lastSuccessTime: 0
						};
						
						uni.showToast({
							title: '新Key添加成功！',
							icon: 'success'
						});
						
						// 重新尝试解析当前地址
						this.retryCurrentAddress();
					} else {
						uni.showToast({
							title: '新Key测试失败，请检查Key是否正确',
							icon: 'none',
							duration: 3000
						});
					}
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，无法测试Key',
						icon: 'none'
					});
				}
			});
		},
		
		// 使用默认位置处理地址
		useDefaultLocationForAddress(type, address) {
			// 使用当前地图中心作为默认位置
			const defaultLocation = {
				lat: this.latitude,
				lng: this.longitude
			};
			
			// 缓存地址（即使没有精确坐标）
			uni.setStorageSync(`address_${address}`, defaultLocation);
			
			this.form.locationData = defaultLocation;
			this.updateMarkers();
			
			uni.showToast({
				title: '已使用默认位置',
				icon: 'none',
				duration: 2000
			});
		},
		
		// 重试当前地址解析
		retryCurrentAddress() {
			// 重新解析当前正在处理的地址
			const currentAddress = this.currentResolvingAddress;
			if (currentAddress) {
				this.resolveAddressWithFallback(currentAddress.type, currentAddress.address, 0);
			}
		},
		
	}
}
</script>

<style scoped>
.jump-start-page {
  background: #f5f5f5;
  min-height: 100vh;
  position: relative;
}

/* 页面背景色区域 - 顶部蓝色区域 */
.jump-start-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 250rpx; /* 蓝色区域高度 - 缩小 */
  background-color: #3184FD;
  z-index: 0; /* 在页面内容下方 */
}

/* 顶部导航栏 */
.header {
  background: #fff;
  padding-top: var(--status-bar-height, 0);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70rpx; /* 缩小导航栏高度 */
  padding: 0 32rpx;
  position: relative;
}

.nav-left {
  display: flex;
  align-items: center;
  width: 80rpx;
}

.back-icon {
  font-size: 36rpx; /* 缩小返回图标 */
  color: #333;
  font-weight: bold;
  line-height: 1;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32rpx; /* 缩小标题字体 */
  font-weight: 600;
  color: #333;
}

.nav-right {
  width: 80rpx;
}

.jump-start-page {
  padding: 20rpx;
}

.map-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 12rpx;
  margin-bottom: 20rpx;
}

.map {
  width: 100%;
  height: 520rpx; /* 增加地图高度 */
  border-radius: 12rpx;
  overflow: hidden;
	position: relative;
}

.map-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12rpx;
	z-index: 10;
}

.map-loading text {
	color: #666;
	font-size: 28rpx;
}

.tabs {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 32rpx;
  color: #333;
	transition: all 0.3s ease;
	position: relative;
	cursor: pointer;
}

.tab:hover {
	background: #f5f5f5;
	border-radius: 12rpx;
}

.tab.active {
  color: #0a78ff;
  font-weight: 600;
	background: #e6f3ff;
	border-radius: 12rpx;
	transform: scale(1.02);
}

.tab.active::after {
  content: '';
  position: absolute;
  right: 40rpx;
  left: 40rpx;
  bottom: -10rpx;
  height: 8rpx;
  background: #0a78ff;
  border-radius: 8rpx;
	animation: slideIn 0.3s ease;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

.service-info {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.info-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-content text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.form {
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 0;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 16rpx 20rpx;
	position: relative;
}

.label {
  width: 140rpx;
  height: 64rpx;
  background: #0a78ff;
  color: #fff;
  border-radius: 40rpx;
  text-align: center;
  line-height: 64rpx;
  margin-right: 20rpx;
}

.input {
  flex: 1;
  height: 64rpx;
  background: #f7f7f7;
  border-radius: 40rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
}

.textarea-item {
	align-items: flex-start;
}

.textarea {
  flex: 1;
  min-height: 180rpx;
  background: #f7f7f7;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
}

.call-wrap {
	padding: 30rpx 0 10rpx;
}

.call-btn {
  height: 92rpx;
  background: linear-gradient(90deg, #ff6a2f, #ff3b00);
  color: #fff;
  border-radius: 60rpx;
  font-size: 34rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.record-link {
  text-align: center;
  color: #999;
  margin-top: 16rpx;
}

.police-card {
  background: #fff;
  border-radius: 16rpx;
	padding: 24rpx;
  margin-top: 12rpx;
}

.police-title {
	font-size: 36rpx;
	margin-bottom: 24rpx;
	color: #333;
	font-weight: 600;
}

.police-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
}

.police-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 12rpx;
}

.police-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 12rpx;
	display: block;
	object-fit: contain;
}

.police-name {
	color: #333;
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 8rpx;
	text-align: center;
}

.police-tel {
	color: #666;
	font-size: 24rpx;
	text-align: center;
}

.emergency-recovery {
	position: fixed;
	bottom: 160rpx;
	left: 20rpx;
	right: 20rpx;
	z-index: 1000;
}

.recovery-btn {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(90deg, #ff4757, #ff3742);
	color: #fff;
	border-radius: 40rpx;
	font-size: 28rpx;
	font-weight: 600;
	box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);
	animation: pulse 2s infinite;
}


@keyframes pulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.bottom-tab-placeholder {
	height: 140rpx;
}
</style>